<template>
  <!-- 左侧弹出层 -->
  <van-popup v-model:show="popState.show"
             :position="position"
             :style="style"
             :close-on-popstate="true"
             @closed="closed"
             :lazy-render="false"
             @opened="opened"
             teleport="body"
             :lock-scroll="false"
             :safe-area-inset-bottom="true"
             round="round">
    <div>
      <slot name="content"></slot>
    </div>
  </van-popup>
</template>

<script>
import { inject } from 'vue'
export default {
  // 左侧弹出层
  props: {

    // 弹出层打开且动画结束时事件
    opened: {
      required: false,
      type: Function
    },
    position: {
      required: false,
      type: String,
      default: 'left'
    },
    style: {
      require: false,
      type: Object,
      default: { height: '100%', width: '100%' }
    },
    round: {
      require: false,
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    const popState = inject('popState')
    const closed = () => {
      popState.show = false
    }
    return {
      closed,
      popState
    }
  }
}
</script>

<style scoped>
</style>